<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=0" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>树洞</title>
		<!-- head 中 -->
		<link rel="stylesheet" href="${CONTEXT_PATH}/treehole/jquery-weui/dist/lib/weui.min.css">
		<link rel="stylesheet" href="${CONTEXT_PATH}/treehole/jquery-weui/dist/css/jquery-weui.css">
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_1465736620_2647262.css">
		<script type="text/javascript" src="${CONTEXT_PATH}/treehole/jquery-weui/underscore.js"></script>
		<style rel="stylesheet" type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.imgPanl {

			}
			.weui_panel{
				background: url("/img/bg.jpg");
			}

			body{
				background: url("/img/bgline.png");
			}
			.weui_media_title {
				margin: 0 !important;
				border-radius: 5px;
			}
			a.weui_media_desc {
				height: 54px;
				line-height: 18px !important;
				cursor: pointer;
			}
			.weui_media_info_meta {
				height: 26px;
				line-height: 26px;
			}
			.float-right{
				float:right !important;
			}
			.swiper-wrapper img{width: 100%}
		</style>

		<script id="jsontem" type="text/template">
			<%for(var i=0;i< list.length;i++){%>
			<div class="weui_panel">
				<div class="weui_panel_hd" style="display: none">

				</div>
				<div class="weui_panel_bd">
					<div class="weui_media_box weui_media_text weui-row">
						<div class="imgPanl weui-col-25">
							<img class="weui_media_title weui-col-100" src="http://www.0713jc.com/img/icon.jpeg">
						</div>
						<div class="article weui-col-75">
							<a class="weui_media_desc" style="-webkit-line-clamp:3" href="/treehole/article?articleid=<%=list[i].id%>">
								<%=list[i].content%>
							</a>
							<ul class="weui_media_info"  >
								<li class="weui_media_info_meta">时间<span><%=list[i].time%></span></li>
								<li onclick="showPromot(this);" data-articleid="<%=list[i].id%>" class="weui_media_info_meta float-right" ><i class="icon-reply1 iconfont" ></i>
								</li>
							</ul>
						</div>

					</div>
				</div>
			</div>
			<% } %>
		</script>
	</head>

	<body ontouchstart>
		<div class="swiper-container" data-space-between='10' data-pagination='.swiper-pagination' data-autoplay="1000">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="http://img2.imgtn.bdimg.com/it/u=3752996565,2307534651&fm=21&gp=0.jpg" alt=""></div>
			</div>
			<div class="swiper-pagination swiper-pagination-bullets"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
		</div>
		<div class="container" style="padding-bottom: 55px;">
			<div id="list"></div>
			<div class="weui-infinite-scroll" >
				<div class="infinite-preloader"></div>
				正在加载...
			</div>
			<div class="lastPage" style="display: none;text-align: center">已经是最后一页啦</div>
		</div>
		<div class="tab-panel" style="position: fixed;width: 100%;position: fixed;bottom: 0;">
			<div class="weui_tab">
				<div class="weui_tab_bd">

				</div>
				<div class="weui_tabbar">
					<a href="javascript:;" class="weui_tabbar_item weui_bar_item_on">
						<div class="weui_tabbar_icon">
							<img src="${CONTEXT_PATH}/treehole/jquery-weui/demos/images/icon_nav_button.png" alt="">
						</div>
						<p class="weui_tabbar_label">微信</p>
					</a>
					<a href="javascript:;" class="weui_tabbar_item">
						<div class="weui_tabbar_icon">
							<img src="${CONTEXT_PATH}/treehole/jquery-weui/demos/images/icon_nav_msg.png" alt="">
						</div>
						<p class="weui_tabbar_label">通讯录</p>
					</a>
					<a href="javascript:;" class="weui_tabbar_item" id="post-article">
						<div class="weui_tabbar_icon">
							<img src="${CONTEXT_PATH}/treehole/jquery-weui/demos/images/icon_nav_article.png" alt="">
						</div>
						<p class="weui_tabbar_label" >发布</p>
					</a>
					<a href="javascript:;" class="weui_tabbar_item">
						<div class="weui_tabbar_icon">
							<img src="${CONTEXT_PATH}/treehole/jquery-weui/demos/images/icon_nav_cell.png" alt="">
						</div>
						<p class="weui_tabbar_label">我</p>
					</a>
				</div>
			</div>
		</div>

	</body>
	<script src="${CONTEXT_PATH}/treehole/jquery-weui/dist/lib/jquery-2.1.4.js"></script>
	<script src="${CONTEXT_PATH}/treehole/jquery-weui/dist/js/jquery-weui.js"></script>

	<script type='text/javascript' src='${CONTEXT_PATH}/treehole/jquery-weui/dist/js/swiper.js' charset='utf-8'></script>
	<script type="text/javascript">
		var M = 1;
		$(".swiper-container").swiper();
		var loading = false; //状态标记
		loadjson(M);
		$(document.body).infinite(500).on("infinite", function(){
			if (loading) return;
			loading = true;
			setTimeout(function() {
				var para={};
				para.page=M;
				loadjson(para);
				loading=false;
			}, 1500); //模拟延迟
		});
		function showPromot(target) {
			var articleid=$(target).attr("data-articleid");
			var para={};
			para.articleid=articleid;
			$.prompt("请输入回复内容","",function(text) {
				para.text=text;
				$.ajax({
					type:"post",
					url:"/treehole/saveComment",
					data:para
				}).done(function(){
					alert("成功")
				}).fail(function(){
					alert("失败!");
				})
			}, function() {
				//点击取消后的回调函数
			});
		}

		//$("body,html").bind(".postArticle","click",function(){
//		$(".postArticle").bind("click",function(){
//			alert(123123);
////			var userId=$(this).attr("data-userid");
////			var para={};
////			para.userid=userId;
////			$.prompt("请输入回复内容", function(text) {
////				para.text=text;
////				$.ajax({
////					type:"post",
////					url:"/treehole/saveComment",
////					data:para
////				}).done(function(){
////					alert("成功")
////				}).fail(function(){
////					alert("失败!");
////				})
////			}, function() {
////				//点击取消后的回调函数
////			});
//		});
		$("#post-article").click(function(){
			var userId=1;
			var para={};
			para.userid=userId;
			$.prompt("请输入回复内容", "",function(text) {
				para.text=text;
				$.ajax({
					type:"post",
					url:"/treehole/saveArticle",
					data:para
				}).done(function(data){
					alert(data)
				}).fail(function(data){
					alert(data);
				})
			}, function() {
				//点击取消后的回调函数
			});
		});
		function loadjson(para){
			$.ajax({
				type: "post",
				url:"/treehole/getList",
				data:para,
				success: function(json){
					var temhtml = _.template($("#jsontem").html());
					var htnlTem = temhtml(json);
					$("#list").before(htnlTem);
					M+=1;
					if(json.lastPage){
						$(document.body).destroyInfinite();
						$(".weui-infinite-scroll").css({
							display:"none"
						})
						$(".lastPage").css({
							display:"block"
						})
					}
				}
			})
		}
		//进入页面，初始化方法直接调用方法loadJson，传参：PAGE=M （当前页参数M,第一次打开页面肯定是0,执行完之后，M=M+1）
		//当当前下拉框距离底部X像素的时候，触动方法loadJson  传参M+1,并且设置M=M+1
	</script>

</html>